var rankingTableOption = {
    url: 'getTestDataWithCertainNum',
    queryParams: function (params) {
        return {
            num: 5,
        }
    },
    columns: [
        {title: 'TOP', formatter: 'increases'},
        {field: 'testShortStr', title: '会员昵称'},
        {field: 'testBigInt', title: '金额(元)'},
        {field: 'testSmallInt', title: '次数'},
        {field: 'testShortStr', title: '车型'}
    ],
    responseHandler: function (data) {
        return data;
    }
};

var refundOrderTableOption = {
    url: 'getTestDataWithCertainNum',
    queryParams: function (params) {
        return {
            num: 5
        }
    },
    columns: [
        {title: '序号', formatter: 'increases'},
        {field: 'testShortStr', title: '会员昵称'},
        {field: 'testDateTime', title: '充电时间', formatter:'timestamp2datetime'},
        {title: '操作', formatter:function () {
            return ["<a class='operate-check' onclick='check()'>查看</a>"].join('');
        }}
    ],
    responseHandler: function (data) {
        return data;
    }
};

$(document).ready(function () {

    /* 充值金额统计图(目前静态) */
    createLineChart();

    /* 一号表格：会员排行 */
    setBootstrapTableWithoutPagination('#RankingTop5Table', rankingTableOption);

    /* 二号表格：待退款订单 */
    setBootstrapTableWithoutPagination('#pendingRefundOrderTable', refundOrderTableOption);

});

/* 生成充值金额折线统计图 */
function createLineChart() {
    var chart = echarts.init(document.getElementById('chargingSumChart'));

    /* 折线图选项设置 */
    var option = {
        title: {
            text: '充电金额',
            textStyle: {
                fontSize: 20,
                fontWeight: 'normal'
            }
        },
        legend: {
            data: ['交大充电站','清华充电站'],
            right: 8,
            itemGap: 20,
            itemWidth: 24,
            itemHeight: 8
        },
        grid: {
            right: 40,
            left: 20,
            bottom: 20,
            top: 45,
            containLabel: true      /* 不明含义？ */
        },
        xAxis : {
            type: 'category',
            boundaryGap: true, /* 坐标轴两边留白 距离如何设置？ */
            name: '时间',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            data:
                ['07/11','08/11','09/11','10/11','11/11','12/11','13/11',
                    '14/11','15/11','16/11','17/11','18/11','19/11','20/11',
                    '21/11','22/11','23/11','24/11','25/11','26/11','27/11',
                    '28/11','29/11','30/11','12/01','12/02','12/03','12/04'],

        },
        yAxis :
        {
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#E7E7E7'
                }
            },
            type : 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#FFFFF'
                }
            }
        },
        dataZoom: {
            type: 'slider',
            filterMode: 'filter',
            start: 0,
            end: 33,
            height:15,
            bottom: 0,
        },
        series : [
            {
                name:'交大充电站',
                type:'line',
                symbolSize: 10,
                areaStyle: {},
                itemStyle: {
                    normal: {
                        color: '#52C2CF'
                    }
                },
                areaStyle: {
                    opacity: 0.1
                },
                data:[1600, 2100, 1800, 1900, 1750, 2400, 1400]
            },
            {
                name:'清华充电站',
                type:'line',
                symbolSize: 10,
                areaStyle: {},
                itemStyle: {
                    normal: {
                        color: '#55B85A'
                    }
                },
                areaStyle: {
                    opacity: 0.1
                },
                data:[2500, 1800, 1200, 1500, 1250, 2200, 2150]
            },
        ]
    };

    chart.setOption(option);

    /* 表格自适应大小 */
    window.onresize = function () {
        chart.resize();
    }
}

function check() {
    alert("查看");
}